
import { useState } from 'react';
import { Radio, Sliders, Zap, TrendingUp } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';

export default function SignalProcessing() {
  const [filterType, setFilterType] = useState('lowpass');
  const [cutoffFreq, setCutoffFreq] = useState([1000]);
  const [amplifierGain, setAmplifierGain] = useState([1]);
  const [signalType, setSignalType] = useState('sine');
  const [frequency, setFrequency] = useState([440]);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">信号处理</h2>
          <p className="text-gray-400">音频信号滤波、放大与生成</p>
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
        {/* Signal Source Settings */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <Radio className="w-5 h-5 mr-2" />
            信号源设置
          </h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">信号类型</label>
              <Select value={signalType} onValueChange={setSignalType}>
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sine">正弦波</SelectItem>
                  <SelectItem value="square">方波</SelectItem>
                  <SelectItem value="triangle">三角波</SelectItem>
                  <SelectItem value="sawtooth">锯齿波</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                频率: {frequency[0]} Hz
              </label>
              <Slider
                value={frequency}
                onValueChange={setFrequency}
                max={20000}
                min={20}
                step={10}
                className="mt-2"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">采样率</label>
              <Select defaultValue="44100">
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="44100">44100 Hz</SelectItem>
                  <SelectItem value="48000">48000 Hz</SelectItem>
                  <SelectItem value="96000">96000 Hz</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <Button className="btn-primary w-full">
              生成信号
            </Button>
          </div>
        </Card>

        {/* Filter Settings */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <Sliders className="w-5 h-5 mr-2" />
            滤波器设置
          </h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">滤波器类型</label>
              <Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="lowpass">低通滤波器</SelectItem>
                  <SelectItem value="highpass">高通滤波器</SelectItem>
                  <SelectItem value="bandpass">带通滤波器</SelectItem>
                  <SelectItem value="bandstop">带阻滤波器</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                截止频率: {cutoffFreq[0]} Hz
              </label>
              <Slider
                value={cutoffFreq}
                onValueChange={setCutoffFreq}
                max={20000}
                min={20}
                step={10}
                className="mt-2"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">阶数</label>
              <Select defaultValue="4">
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="2">2阶</SelectItem>
                  <SelectItem value="4">4阶</SelectItem>
                  <SelectItem value="8">8阶</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <Button className="btn-primary w-full">
              应用滤波
            </Button>
          </div>
        </Card>

        {/* Amplifier Settings */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <Zap className="w-5 h-5 mr-2" />
            放大器设置
          </h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                放大倍数: {amplifierGain[0]}x
              </label>
              <Slider
                value={amplifierGain}
                onValueChange={setAmplifierGain}
                max={10}
                min={0.1}
                step={0.1}
                className="mt-2"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-3 bg-black/20 rounded-lg">
                <div className="text-blue-400 font-semibold">输入电平</div>
                <div className="text-xl text-white">-12 dB</div>
              </div>
              <div className="text-center p-3 bg-black/20 rounded-lg">
                <div className="text-green-400 font-semibold">输出电平</div>
                <div className="text-xl text-white">-6 dB</div>
              </div>
            </div>

            <Button className="btn-primary w-full">
              应用放大
            </Button>
          </div>
        </Card>

        {/* Real-time Analysis */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <TrendingUp className="w-5 h-5 mr-2" />
            实时分析
          </h3>
          
          <div className="space-y-4">
            {/* Time Domain */}
            <div>
              <h4 className="text-sm font-medium text-gray-300 mb-2">时域分析</h4>
              <div className="h-24 bg-black/20 rounded-lg p-2 flex items-center justify-center">
                <div className="w-full h-full flex items-end justify-between space-x-1">
                  {Array.from({ length: 40 }, (_, i) => (
                    <div
                      key={i}
                      className="bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm"
                      style={{
                        height: `${30 + Math.sin(i * 0.5) * 20}%`,
                        width: '2%',
                      }}
                    />
                  ))}
                </div>
              </div>
            </div>

            {/* Frequency Domain */}
            <div>
              <h4 className="text-sm font-medium text-gray-300 mb-2">频域分析</h4>
              <div className="h-24 bg-black/20 rounded-lg p-2 flex items-center justify-center">
                <div className="w-full h-full flex items-end justify-between space-x-1">
                  {Array.from({ length: 40 }, (_, i) => (
                    <div
                      key={i}
                      className="bg-gradient-to-t from-purple-500 to-pink-400 rounded-sm"
                      style={{
                        height: `${Math.max(5, 80 - i * 2)}%`,
                        width: '2%',
                      }}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Processing History */}
      <Card className="glass-card p-6">
        <h3 className="text-lg font-semibold mb-4 text-white">处理记录</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left py-3 text-gray-400">时间</th>
                <th className="text-left py-3 text-gray-400">操作</th>
                <th className="text-left py-3 text-gray-400">参数</th>
                <th className="text-left py-3 text-gray-400">结果</th>
              </tr>
            </thead>
            <tbody>
              {[
                { time: '2023-11-01 15:30:00', operation: '低通滤波', params: '截止频率: 1000Hz', result: '成功' },
                { time: '2023-11-01 15:28:00', operation: '信号放大', params: '放大倍数: 2x', result: '成功' },
                { time: '2023-11-01 15:25:00', operation: '正弦波生成', params: '频率: 440Hz', result: '成功' },
              ].map((record, index) => (
                <tr key={index} className="border-b border-gray-800">
                  <td className="py-3 text-gray-300">{record.time}</td>
                  <td className="py-3 text-gray-300">{record.operation}</td>
                  <td className="py-3 text-gray-300">{record.params}</td>
                  <td className="py-3">
                    <span className="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
                      {record.result}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}
